<template>
  <el-card class="engine-card" shadow="hover">
    <div class="engine-card-content">
      <!-- 左侧引擎图标 -->
      <div class="icon">
        <el-image
          :src="icon"
          fit="contain"
          style="width: 100px; height: 100px; border-radius: 10px"
          alt="Engine Icon"
        ></el-image>
      </div>

      <!-- 右侧信息区域 -->
      <div class="info">
        <!-- 上部区域 -->
        <div class="top-section">
          <h3 class="name">{{ name }}</h3>
          <p class="description">{{ description }}</p>
          <p class="upload-unit">
            <span>上传单位：</span><el-tag>{{ uploadUnit }} </el-tag>
          </p>
        </div>
      </div>
    </div>

    <!-- 下部区域 -->
    <div class="bottom-section">
      <div class="extra-info">
        <!-- 其他信息 -->
        <p>
          <el-icon>
            <InfoFilled />
          </el-icon>
          &nbsp; <strong>状态：</strong>{{ status }}
        </p>
        <p>
          <el-icon>
            <Clock />
          </el-icon>
          &nbsp; <strong>创建时间：</strong>{{ createdTime }}
        </p>
        <p>
          <el-icon>
            <Cpu />
          </el-icon>
          &nbsp; <strong>使用次数：</strong>{{ usageStats }}
        </p>
      </div>

      <!-- 关联模型列表 -->
      <p class="associated-model">
        <span>关联模型：</span>
        <el-tag
          v-for="(model, index) in associatedModels"
          :key="index"
          :type="model.color"
          style="margin-right: 5px"
        >
          {{ model.name }} (版本: {{ model.version }})
        </el-tag>
      </p>
    </div>
  </el-card>
</template>
<script setup>
import { defineProps } from "vue";

// 接收的属性
defineProps({
  icon: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  uploadUnit: {
    type: String,
    required: true,
  },
  associatedModels: {
    type: Array,
    required: true,
    default: () => [
      { name: "模型 Alpha", version: "1.0", color: "success" },
      { name: "模型 Beta", version: "2.0", color: "warning" },
    ],
  },
  status: {
    type: String,
    required: false,
    default: "正常",
  },
  createdTime: {
    type: String,
    required: false,
    default: "未知",
  },
  usageStats: {
    type: Number,
    required: false,
    default: 0,
  },
});
</script>
<style lang="scss" scoped>
.engine-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(145deg, #2e2e2e, #3c3c3c);
  color: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

  .el-card__body {
    padding: 0 !important;
  }
}

.engine-card-content {
  display: flex;
  align-items: flex-start;
}

.icon {
  margin-right: 15px;
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top-section {
  margin-bottom: 10px;

  .name {
    margin: 0 0 5px;
  }

  .description {
    margin: 0 0 5px;
    color: #999;
    display: -webkit-box; /* 必须设置，用于多行溢出 */
    -webkit-box-orient: vertical; /* 设置盒子排列方向为垂直 */
    -webkit-line-clamp: 2; /* 限制显示的行数，例如显示 3 行 */
    overflow: hidden; /* 隐藏超出的内容 */
    width: 350px; /* 设置容器宽度 */
  }
}

.extra-info {
  display: flex;
  margin: 0 0 10px;
  p {
    margin: 0 10px 0 0;
  }
}

.extra-info el-icon {
  margin-right: 5px;
  color: #409eff;
}

.associated-model el-tag {
  cursor: pointer;
  margin-bottom: 5px;
}
</style>
<style lang="scss">
.engine-card {
  .el-card__body {
    padding: 0 !important;
  }
}

.extra-info {
  p {
    display: flex;
    align-items: center;
    color: #999;

    el-icon {
      margin: 0 10px;
    }
  }
}
</style>
